<template>
  <view class="arrange">
    <g-month-calendar
      :more="false"
      bg-color="linear-gradient(180deg, #ABD49D 0%, #4EA770 100%)"
      color="#fff"
      align="center"
      checked-class="active-checked"
      :dot-list="dotList"
      show-back
      :dot-style="{
        background: '#fff',
      }"
      @selected-change="changeDate"
      @days-change="daysChange"
    >
      <view class="arrange-content">
        <view
          class="arrange-item"
          v-for="(item, index) in dataList"
          :key="index"
          :style="{
            '--statusColor': getColor(item.status),
          }"
          @click="handleDetail(item)"
        >
          <view class="arrange-item-left">
            <view class="date">
              {{ timeFormat(Number(new Date(item.planBeginTime))) }}-{{
                timeFormat(Number(new Date(item.planEndTime)))
              }}
            </view>
            <view class="title">{{ item.projectName }}</view>
          </view>
          <view class="arrange-item-right">
            <view class="status">{{ getStatusLabel(item.status) }}</view>
          </view>
        </view>
        <uv-empty
          v-if="dataList.length == 0"
          margin-top="20vh"
          :icon="empty"
          text="还没有安排日程哦"
        />
        <uv-load-more v-else :status="status" line />
      </view>
    </g-month-calendar>
  </view>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { timeFormat } from "@/common/mothed.js";
import { getDateMarks, planList } from "@/request/home.js";
import empty from "@/static/empty.png";

const props = defineProps({
  // 是否下拉刷新
  refresh: {
    type: Boolean,
    default: false,
  },
  // 上拉加载
  onMore: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["onRefresh", "onReach"]);

const queryParams = ref({
  time: "", // 默认选中天
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0); // 总条数
const dataList = ref([]); // 日程列表
const status = ref("loadmore"); // 加载状态
const beginTime = ref(); // 本周开始时间
const endTime = ref(); // 本周结束时间
const dotList = ref([]); // 标记列表

onMounted(() => {
  getList();
});

watch(
  props,
  (v) => {
    if (v.refresh) {
      setTimeout(() => {
        queryParams.value.pageNum = 1;
        getList();
      }, 0);
    }
    if (v.onMore) {
      if (total.value > dataList.value.length) {
        queryParams.value.pageNum += 1;
        getList();
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

// 日期范围
const daysChange = (date) => {
  beginTime.value = timeFormat(Number(date.start));
  endTime.value = timeFormat(Number(date.end));
  getMarks();
};

// 获取标记列表
const getMarks = () => {
  getDateMarks({
    beginTime: beginTime.value,
    endTime: endTime.value,
  }).then((res) => {
    if (res.code == 200) {
      dotList.value = res.data;
    }
  });
};

// 获取数据列表
const getList = () => {
  status.value = "loading";
  planList(queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        dataList.value =
          queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
        total.value = res.total;
      }
    })
    .finally(() => {
      emit("onRefresh", false);
      uni.stopPullDownRefresh();
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
      if (props.onMore) emit("onReach", false);
    });
};

// 切换日期
const changeDate = (date) => {
  queryParams.value.time = date;
  queryParams.value.pageNum = 1;
  getList();
};

// 日程详情
const handleDetail = (item) => {
  if (item.messageId) {
    uni.navigateTo({
      url: "/pages/Message/messageDetail?id=" + item.messageId,
    });
  }
};

// 状态颜色
const getColor = (status) => {
  switch (status) {
    case 1:
      return "#f2ce90";
    case 2:
      return "#85C889";
    case 3:
      return "#87BCF5";
    case 4:
    case 6:
      return "#85C889";
    case 5:
      return "#F2AFA5";
    default:
      return "";
  }
};

// 状态中文显示
const getStatusLabel = (status) => {
  switch (status) {
    case 1:
      return "未排班";
    case 2:
      return "已预约";
    case 3:
      return "进行中";
    case 4:
    case 6:
      return "已完成";
    case 5:
      return "已超时";
  }
};
</script>
<style lang="scss" scoped>
.arrange {
  padding: 30rpx;
  box-sizing: border-box;
  .arrange-content {
    padding: 20rpx;
  }
}
:deep(.is-today) {
  color: #fff !important;
}
:deep(.active-checked) {
  background-color: #fff !important;
  color: #4ea770 !important;
}
.arrange-item {
  --statusColor: #f2ce90;
  width: auto;
  height: 120rpx;
  background: #f6f6f6;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
  &-left {
    width: calc(100% - 240rpx);
    height: 100%;
    padding-left: 60rpx;
    position: relative;
    border-right: 2rpx solid #e7e7e7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 20rpx;
      height: 120rpx;
      background-color: var(--statusColor);
    }
    .date {
      font-size: 28rpx;
      color: #757575;
    }
    .title {
      font-size: 28rpx;
      color: #212121;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  &-right {
    width: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .status {
      font-size: 28rpx;
      color: #757575;
      display: flex;
      align-items: center;
      &::before {
        content: "";
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: var(--statusColor);
        margin-right: 10rpx;
      }
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
